<template>
    <div class="musicList">
        <el-table
        :data="songList"
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :row-class-name="tableRowClassName"
        :lazy="true"
        :highlight-current-row = "true"
        :current-row-key="lightIndex"
        @row-dblclick="play"
        style="width: 100%">
            <!--显示加载动画-->
            <template slot="empty"><img src="../../../assets/img/loading.gif" alt=""></template>
            <el-table-column
            type="index"
            >
            </el-table-column>
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <div class="iconfont iconxihuan operation" @click="addLike(scope.row)"></div>
                    <div class="iconfont iconxiazai operation" @click="addLike(scope.row)"></div>
                </template>
            </el-table-column>
            <el-table-column
            prop="name"
            label="音乐标题"
            >
            </el-table-column>
            <el-table-column
            label="歌手"
            >
                <template slot-scope="scope" style="display:flex">
                <div @click="goArtist(item.id)" 
                v-for="(item,index) in scope.row.ar"  
                :key="index"
                class="song">{{item.name}} <span class="hrs" v-if="index < scope.row.ar.length-1">/</span></div>
                </template>
            </el-table-column>
            <el-table-column
            label="专辑">
                <template slot-scope="scope">
                    <div @click="goAblum(scope.row.al.id)" class="album">{{scope.row.al.name}}</div>
                </template>
            </el-table-column>
            <el-table-column
            prop="dt"
            label="时长 ">
                <template slot-scope="scope">
                    <div>{{scope.row.dt | dtFormat}}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {_getSongtDetail} from '../../../network/detail'
import {currentTimeFormat} from '../../../util/tool'
import MsgBus from '../../../util/bus'
export default {
    name: 'musicList',
    props: [
        'songList',
        'playListId'
    ],
    data() {
       return {
        tableData: [
            
        ],
        headStyle:{background:'#2f3640',color:'#ccc'},
        rowStyle:{background:'#2f3640',color:'#fff'},
        cellStyle:{display:'flex'},
        // 高亮行
        lightIndex:0,
      }
    },
    computed: {

    },
    created() {
        console.log(this.playListId)
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        tableRowClassName({row,rowIndex}){
            // 将每一行索引放进row
            row.index = rowIndex
        },
        getSongtList(){
            console.log(this.songList)
            
        },
        addLike(row){
            console.log(row.index)
        },
        // 双击播放音乐
        play(row,column,event){
            console.log(row)
            // 歌单信息
            let playListInfo = {
                id:this.playListId,
                list:this.songList
            }
            // 传递当前歌单
            if(this.$store.state.playId != this.playListId){
                this.$store.commit('changePlayList',playListInfo)
            }
            // 传递歌曲信息
            MsgBus.$emit('songDetail',row)
        },
        // 
        goAblum(id){
            console.log(id)
            this.$router.push({path:'/album',query:{id}})
        },
        goArtist(id){
            console.log(id)
            this.$router.push({path:'/artist',query:{id}})
        }
        
    },
    filters:{
        dtFormat(el){
            return currentTimeFormat(el/1000)
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">

.operation{
    float: left;
    margin-right: 10px;
    color: #fff;
}
tr{
    cursor: pointer;
}
.song,.album{
    cursor: pointer;
}
.hrs{
    padding: 0 3px;
}

</style>
